<template>
  <div style="height: 100%;">
    <div
      v-if="!isReport && trainStatus !== 'FINISHED'"
      class="empty-img"
      align="center"
    >
      <div v-if="trainStatus === 'FAILED'">
        <img
          alt=""
          src="@/assets/view/train-fail.png"
          width="312"
          height="165"
        />
        <p>模型训练失败</p>
        <strong>失败原因：{{ modelData.data && modelData.data.error }}</strong>
      </div>
      <div v-else-if="trainStatus !== 'FINISHED'">
        <img
          alt=""
          src="@/assets/view/train-waiting.png"
          width="312"
          height="165"
        />
        <p>模型训练中</p>
      </div>
    </div>

    <component :is="componentNameOfConfigure" v-else></component>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { queryTrainigStatus, queryModelById } from '@/api/model'
import DataViewStore from '@/store/modules/dataview'

import KMeans from '@/components/studio/data/model/report/KMeans.vue'
import DecisionTree from '@/components/studio/data/model/report/DecisionTree.vue'
import LinearRegression from '@/components/studio/data/model/report/LinearRegression.vue'
import PCA from '@/components/studio/data/model/report/PCA.vue'
import AutoClassification from '@/components/studio/data/model/report/AutoClassification.vue'
import AutoRegression from '@/components/studio/data/model/report/AutoRegression.vue'

@Component({
  components: {
    'k-means': KMeans,
    'decision-tree': DecisionTree,
    'linear-regression': LinearRegression,
    'p-c-a': PCA,
    'auto-classification': AutoClassification,
    'auto-regression': AutoRegression,
  },
})
export default class ModelAccess extends Vue {
  @Prop({ type: Object, default: () => ({}) }) modelData!: any
  @Prop({ type: Number, default: null }) modelId!: number
  @Prop({ type: Boolean, default: null }) isReport!: boolean
  @Prop({ type: Number, default: 0 }) projectId!: number
  @Prop({ type: String, default: null }) algorithm!: string

  private algorithmType: any = {
    KM: 'k-means',
    LR: 'linear-regression',
    DTC: 'decision-tree',
    PCA: 'p-c-a',
    AUTOC: 'auto-classification',
    AUTOR: 'auto-regression',
  }

  private get componentNameOfConfigure() {
    const componentName = this.algorithmType[this.algorithm]
    return componentName
  }

  public trainStatus: string | null = null
  // 全量数据的轮询
  public myFullInterval: any

  public get selectModel() {
    return DataViewStore.selectModel
  }

  public created() {
    // if (!this.selectModel){
    //   if (Object.keys(this.modelData).length===0 ){
    //     console.log('11',this.trainStatus)
    //     this.queryModelById(this.$route.query.id)
    //   }else{
    DataViewStore.setSelectModel(this.modelData)
    // }
    // }
    if (!this.isReport) {
      this.fullRunStatusPoll()
    }
  }

  public fullRunStatusPoll() {
    clearInterval(this.myFullInterval)
    if (this.trainStatus !== 'FINISHED') {
      // 先请求一次状态
      this.queryStatus()
      this.myFullInterval = setInterval(() => {
        this.queryStatus()
      }, 1000)
    }
  }

  public queryStatus() {
    const modelId = this.modelId ?? this.modelData.id ?? this.$route.query.id
    queryTrainigStatus({
      data: { projectId: this.projectId, id: modelId },
    })
      .then((response: any) => {
        if (response.data.code === 100) {
          this.trainStatus = response.data.result.state
          if (
            this.trainStatus === 'FINISHED' ||
            this.trainStatus === 'FAILED' ||
            this.trainStatus === 'KILLED'
          ) {
            clearInterval(this.myFullInterval)
            this.queryModelById(this.modelId)
            DataViewStore.queryAllModelList(this.projectId, null)
            this.$emit('train-status', this.trainStatus)
          }
        }
      })
      .catch(() => {
        clearInterval(this.myFullInterval)
      })
  }

  public async queryModelById(modelId: any) {
    if (!modelId) {
      return
    }
    const response = await queryModelById({
      data: { projectId: this.projectId, id: modelId, data: {} },
    })
    if (response.data.code === 100) {
      DataViewStore.setSelectModel(response.data.result)
    }
  }
}
</script>

<style lang="less" scoped>
.empty-img {
  margin: 160px 0;
}
</style>
